<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <rx-layout >
            <div slot="center">
                <rx-fit>
                    <div slot="toolheader" border="false" foldbtn="false">
                        <div class="table-operator">
                            <a-button type="primary" @click="addRow">{{$ti18('rxList.newBtn','添加')}}</a-button>
                            <a-button type="danger" @click="delRow">{{$ti18('rxList.delBtn','删除')}}</a-button>
                        </div>
                    </div>
                    <rx-grid
                        ref="instConfig"
                        bordered
                        :allowRowSelect="true"
                        :showPage="false"
                        :multiSelect="true"
                        :columns="columns"
                        :dataSource="instConfigs"
                    >
                        <span slot="instLabel" slot-scope="{text,record}">
                            <a-select style="width: 100%;" v-model="record.instLabel" :options="labelOptions" allowClear/>
                        </span>
                        <span slot="component" slot-scope="{text,record}">
                           <a-input style="width: 90%;margin-right: 5px;" v-model="record.component" />
                            <a-tooltip>
                                        <template slot="title" style="width:400px;">
                                            {{i18n('msa.componentPathDesc','组件路径说明')}}
                                        </template>
                                        <a-icon type="question-circle-o"/>
                                    </a-tooltip>
                        </span>
                        <span slot="params" slot-scope="{text,record}">
                           <a-input style="width: 100%;" v-model="record.params" />
                        </span>
                    </rx-grid>
                </rx-fit>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxLayout, RxDialog, RxGrid, RxFit, Util} from "@lowcode/jpaas-common-lib";
import SysDicApi from "@/api/system/core/sysDic";

export default {
    name: "SysMenuInstEdit",
    props: {
        menu: {
            type: Object
        },
        layerid: {
            type: String
        },
        lydata: {
            type: Object
        },
        destroy: {
            type: Function
        },
    },
    components: {
        RxGrid,
        RxLayout,
        RxFit,
        RxDialog
    },
    data() {
        return {
            columns: [
                {
                    title: this.$ti18('rxList.index','序号'),
                    type: 'indexColumn',
                    width: 40,
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'}
                },
                {title: this.i18n('form.orgLabel','机构标签'), dataIndex: 'instLabel', width: 80, scopedSlots: {customRender: 'instLabel'}},
                {title: this.i18n('form.componentPath','组件路径'), dataIndex: 'component', width: 140, scopedSlots: {customRender: 'component'}},
                {title: this.i18n('form.componentParams','组件参数'), dataIndex: 'params', width: 140, scopedSlots: {customRender: 'params'}},
            ],
            labelOptions: [],
            instConfigs: []
        }
    },
    created() {
        if(this.menu.instConfig){
            this.instConfigs=JSON.parse(this.menu.instConfig);
        }
        this.getLabelOptions();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"sysMenu",key);
        },
        getLabelOptions() {
            var alias = "instLabel";
            SysDicApi.getByAlias(alias).then(res => {
                if (res) {
                    for (let i = 0; i < res.length; i++) {
                        this.labelOptions.push({
                            label: res[i].name,
                            value: res[i].value
                        });
                    }
                }
            });
        },
        addRow() {
            this.instConfigs.push({
                instLabel:"",
                component:this.menu.component,
                params:this.menu.params
            });
        },
        delRow() {
            var self = this;
            this.$confirm({
                title: this.i18n('msa.delInfo','确定要删除选中的数据吗?'),
                okText: this.$ti18('rxForm.ackBtn','确认'),
                cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                zIndex: 99999,
                onOk() {
                    self.$refs.instConfig.removeRows();
                },
                onCancel() {
                },
            });

        },
        handleSubmit() {
            Util.closeWindow(this, "ok",this.$refs.instConfig.getData());
        },
        cancel() {
            Util.closeWindow(this, "cancel");
        },
    },
    watch: {}
}
</script>

<style scoped>

</style>